<template>
  <div id="app">
    <my-transfer-1
        v-model="model"
        ref="treeTransfer"
        node-key="id"
        default-expand-all
        :isMostJunior="true"
        show-checkbox
        search
        showCheckAll
        showCheckNum
        nodeCheck
        :props="props"
        :data="data"
    >
      <!-- 自定义节点内容 -->
      <template #leftText="{ node }">
        <span>{{ node.label }}</span>
      </template>
      <template #rightText="{ node }">
        <span>{{ node.label }}</span>
      </template>
    </my-transfer-1>
    <div class="buttons">
      <el-button @click="selected('left')">左侧全选</el-button>
      <el-button @click="cancel('left')">左侧反选</el-button>
      <el-button @click="selected('right')">右侧全选</el-button>
      <el-button @click="cancel('right')">右侧反选</el-button>
      <el-button @click="getValue">获取v-model绑定值</el-button>
      <el-button @click="empty">清空v-model</el-button>
    </div>
  </div>
</template>

<script>
  import { TreeTransfer } from "ele-tree-transfer";
  export default {
    components: {
      'my-transfer-1': TreeTransfer
    },
    data() {
      return {
        props: {
          label: "label",
          value: "id",
          children: "children",
          disabled: "disabled",
        },
        data: [
          {
            id: 1,
            disable: true,
            label: "一级 1",
            children: [
              {
                id: 4,
                label: "二级 1-1",
              },
            ],
          },
          {
            id: 2,
            label: "一级 2",
            children: [
              {
                id: 5,
                label: "二级 2-1",
              },
              {
                id: 6,
                label: "二级 2-2",
              },
              {
                id: 20,
                label: "二级 2-3",
              },
            ],
          },
          {
            id: 3,
            label: "一级 3",
            children: [
              {
                id: 7,
                label: "二级 3-1",
              },
              {
                id: 8,
                label: "二级 3-2",
                disabled: false,
              },
            ],
          },
        ],
        model: [5, 6, 8],
      };
    },
    methods: {
      selected(loca) {
        this.$refs.treeTransfer.changeTreeChecked(true, loca);
      },
      cancel(loca) {
        this.$refs.treeTransfer.changeTreeChecked(false, loca);
      },
      move(flag) {
        this.$refs.treeTransfer[flag === "right" ? "rightMove" : "leftMove"]();
      },
      getValue() {
        console.log(this.model);
      },
      empty() {
        this.model = [];
      },
    },
  };
</script>

<style scoped>
  .buttons {
    margin-top: 10px;
  }
</style>
